<template>
  <view class="contanier">
    <!-- 页头 -->
    <page-head url="/pages/community/search-details/search-details"></page-head>
    <!-- 选项卡 -->
    <tabs-component :data="navList" :active="active" @change="handleNavChange"></tabs-component>
    <!-- 文章列表 -->
    <block v-for="(itemData,index) in data" :key="index">
      <!-- 可滚动区域 -->
      <scroll-view class="article-list-container" v-show="active == index" scroll-y :show-scrollbar="false"
        :scroll-top='scrollTop' @scroll="handleScroll">
        <view class="article-list-content">
          <view v-for="(item,idx) in itemData.data" :key="item.intactArticleId" class="article-list-item">
            <article-block :data="item">
            </article-block>
          </view>
          <view class="data-empty" v-if="itemData.data.length==0">
            <view class="empty__image">
              <image src="/static/empty.png"></image>
            </view>
            <text class="empty__description">暂无文章</text>
          </view>
        </view>
      </scroll-view>
    </block>
    <!-- 悬浮按钮 -->
    <suspension-button :isBackUp='isBackUp' @backup="handleBackUp"></suspension-button>
  </view>
</template>
<script>
  const articleData = {
    // 主键
    "intactArticleId": "",
    // 文章信息
    "article": {
      // 文章id
      "articleId": null,
      // 文章标题
      "title": "从军行",
      // 文章内容
      "content": "青海长云暗雪山，孤城遥望玉门关。黄沙百战穿金甲，不破楼兰终不还。",
      // 发布时间
      "createTime": "1664260225801",
      // 评论数
      "commentNum": 99,
      // 阅读数
      "viewsNum": 1021,
      // 转发数
      "shareNum": 32,
      // 点赞数
      "likeNum": 46
    },
    "user": {
      // 用户ud
      "userId": "1572067213064654850",
      // 用户昵称
      "userName": "唐·王昌龄😁",
      // 用户头像
      "avatar": "https://upload-images.jianshu.io/upload_images/5809200-a99419bb94924e6d.jpg"
    },
    "image": {
      "articleImageId": null,
      // 1张图
      // "imageLink": "https://upload-images.jianshu.io/upload_images/5809200-a99419bb94924e6d.jpg",
      // 2张图
      // "imageLink": "https://upload-images.jianshu.io/upload_images/5809200-a99419bb94924e6d.jpg;https://upload-images.jianshu.io/upload_images/5809200-a99419bb94924e6d.jpg",
      // 8张图
      "imageLink": "https://upload-images.jianshu.io/upload_images/5809200-a99419bb94924e6d.jpg;https://upload-images.jianshu.io/upload_images/5809200-a99419bb94924e6d.jpg;https://upload-images.jianshu.io/upload_images/5809200-a99419bb94924e6d.jpg;https://upload-images.jianshu.io/upload_images/5809200-a99419bb94924e6d.jpg;https://upload-images.jianshu.io/upload_images/5809200-a99419bb94924e6d.jpg;https://upload-images.jianshu.io/upload_images/5809200-a99419bb94924e6d.jpg;https://upload-images.jianshu.io/upload_images/5809200-a99419bb94924e6d.jpg;https://upload-images.jianshu.io/upload_images/5809200-a99419bb94924e6d.jpg"
    },
  };
  // 模拟文章数据
  function createData(num = 1, index = 0) {
    let arr = [];
    for (let i = 0; i < num; i++) {
      // 浅拷贝 防止对象引用 导致 key重复
      let item = JSON.parse(JSON.stringify(articleData));
      // 为了避免 id 重复 增加了index索引作为前缀
      item.intactArticleId = "id_" + index + "_" + i;
      // 为了更好区分数据 针对选项卡的索引
      item.article.title = index + "_" + item.article.title;
      arr.push(item);
    }
    return arr;
  }
  export default {
    data() {
      // 生成四个列表
      let data = [];
      for (let i = 0; i < 4; i++) {
        data.push({
          data: createData(10, i),
          // 当前请求的页数
          page: 1,
          // 总页数
          pages: 0,
          loading: '',
          init: false
        })
      }
      return {
        //当前选中项
        active: 0,
        // 社区选项卡列表
        navList: ["综合推荐", "我的关注", "表白墙", "专业交流"],
        // 是否显示返回顶部按钮
        isBackUp: false,
        // 当前滚动位置
        scrollTop: 0,
        // 滚动位置的延迟记录
        oldScrollTop: 0,
        // 文章列表
        data: data,
      };
    },
    methods: {

      // 监听滚动事件
      // isBackUp 当用户向下滑动后在向上滑动 显示返回顶部按钮
      handleScroll(e) {
        let scrollTop = e.detail.scrollTop;
        // 上次滚动位置小于当前位置 代表正在向下滑动 反之正在向下滑动
        if (this.oldScrollTop <= scrollTop) {
          this.isBackUp = false;
        } else {
          this.isBackUp = true;
        }
        // 优化 当前滚动位置 小于10 返回顶部可不显示
        if (scrollTop < 10) {
          this.isBackUp = false;
        }
        // 记录上一次的位置
        this.oldScrollTop = scrollTop
      },
      // 返回顶部 - 参照:https://uniapp.dcloud.net.cn/tutorial/vue-api.html#componentsolutions
      handleBackUp() {
        this.scrollTop = this.oldScrollTop
        this.$nextTick(function() {
          this.scrollTop = 0
        });
      },
      //导航栏点击切换
      handleNavChange(index, bool = false) {
        this.active = index;
      },


    },
  };
</script>
<style lang="scss" scoped>
  .contanier {
    width: 100%;
    height: 100vh;
    overflow-y: hidden;

    // 文章列表区域
    .article-list-container {
      // 滚动区域的高度 为 屏幕总高度减去 状态栏高度 logo区域高度 搜索框 选项卡高度 加上选项卡向上偏移的距离
      height: calc(100vh - var(--status-bar-height) - 128rpx - 106rpx + 10rpx);

      .article-list-content {
        padding: 0rpx 32rpx;
        box-sizing: border-box;

        .article-list-item {
          margin: auto;
          margin-bottom: 32rpx;
        }

        // 列表数据为空时展示容器
        .data-empty {
          box-sizing: border-box;
          padding: 64px 0;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          .empty__image {
            width: 320rpx;
            height: 320rpx;

            image {
              width: 100%;
              height: 100%;
            }
          }

          .empty__description {
            margin-top: 32rpx;
            padding: 0 120rpx;
            color: #969799;
            font-size: 28rpx;
            line-height: 40rpx;
          }
        }

      }
    }
  }
</style>
